<template>
  <div>
    <!-- <slot v-for="item in $slots" :name="item"></slot> -->
    <p>可以使用$slots获取所有插槽</p>
    <p>此处因为$slots是对象所以，item是值，slot是键，相当于父组件决定了子组件的插槽名称</p>

    <template v-for="(item, slot) in $slots" :key="slot">
      <slot :name="slot"></slot>
    </template>
    <comp></comp>
  </div>
</template>
<script setup lang="ts">
import { ref } from 'vue'
// useAttr() 获取的是未被defineProps()声明过的属性
const comp = h(
  'div',
  {
    class: 'comp',
  },
  [
    h('p', useAttrs(), useSlots().default?.()),
    h(
      'div',
      { class: ['comp-inner', 'comp'],onClick:()=>handleClick() },
      h('p', `${useAttrs().name}${useAttrs().age}`),
    ),
  ],
)
// const props = defineProps({
//     name: {
//         type: String,
//         default: 'default'
//     },
//     age:{
//       type:Number,
//       default:18
//     }
// })
// console.log(props.name, props.age)
onMounted(() => {
  console.log('生命周期执行', useAttrs(), useSlots().header?.())
})
const handleClick = () => {
  console.log('点击事件')
}
const emit = defineEmits(['update:name'])
</script>
<style scoped lang="scss">
:deep(.comp-inner) {
  color: red;
  font-size: 20px;
  background-color: #000;
  padding: 10px;
  border-radius: 10px;
  border: 1px solid #000;
  margin: 10px;
  width: 100px;
  height: 100px;
  display: flex;
}
:deep(.comp) {
  color: blue;
}
</style>
